<template>
	<div class="page-size">
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pages.page"
			:page-sizes="pageSizes"
			:page-size="pages.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pages.total"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	props: {
		pages: {
			type: Object,
			defualt: () => {}
		},
		pageSizes: {
			type: Array,
			default: () => [10, 20, 30, 40]
		}
	},
	data() {
		return {};
	},
	mounted() {
		console.log(this.pages);
	},
	methods: {
		handleSizeChange(val) {
			this.$emit('changePageSize', val);
		},
		handleCurrentChange(val) {
			this.$emit('changeCurrentPage', val);
		}
	}
};
</script>

<style></style>
